<template>
  <view class="setting-container">
    <view class="menu-list">
      <view class="list-cell list-cell-arrow">
        <view class="menu-item-box"  @click="handleToAvatar">
          <view>头像</view>
          <view class="text-right">
            <image v-if="avatar" :src="avatar" class="cu-avatar xl round" mode="widthFix" />
          </view>
        </view>
      </view>
      <view class="list-cell list-cell-arrow" @click="handleToUpgrade">
        <view class="menu-item-box">
          <view>昵称</view>
          <view class="text-right">{{user.name || '请填写'}}</view>
        </view>
      </view>
      <view class="list-cell list-cell-arrow" @click="handleCleanTmp">
        <view class="menu-item-box">
          <view>性别</view>
          <view class="text-right">{{user.sex || '请填写'}}</view>
        </view>
      </view>
      <view class="list-cell list-cell-arrow" @click="handleCleanTmp">
        <view class="menu-item-box">
          <view>微信号</view>
          <view class="text-right">{{user.wechat || '请填写'}}</view>
        </view>
      </view>
    </view>
    <view class="menu-list">
      <view class="list-cell list-cell-arrow" @click="handleToPivace">
        <view class="menu-item-box">
          <view>隐私协议</view>
        </view>
      </view>
      <view class="list-cell list-cell-arrow" @click="handleToCompact">
        <view class="menu-item-box">
          <view>用户协议</view>
        </view>
      </view>
    </view>
    <view class="cu-list menu">
      <view class="cu-item item-box">
        <view class="content text-center" @click="handleLogout">
          <text class="text-red">退出登录</text>
        </view>
      </view>
    </view>
  </view>

</template>

<script>
  import { getUserProfile } from "@/api/system/user"

  export default {
    data() {
      return {
        user: {},
        roleGroup: "",
        postGroup: ""
      }
    },
    computed: {
      avatar() {
        return this.$store.state.user.avatar
      },
    },
    onLoad() {
      this.getUser()
    },
    methods: {
      getUser() {
        getUserProfile().then(response => {
          this.user = response.data
          this.roleGroup = response.roleGroup
          this.postGroup = response.postGroup
        })
      },
      handleToAvatar() {
        this.$tab.navigateTo('/pages/mine/avatar/index')
      },
      handleToPivace() {
        this.$tab.navigateTo('/pages/mine/pivace/index')
      },
      handleToCompact() {
        this.$tab.navigateTo('/pages/mine/compact/index')
      },
      handleLogout() {
        this.$modal.confirm('确定注销并退出系统吗？').then(() => {
          this.$store.dispatch('LogOut').then(() => {
            this.$tab.reLaunch('/pages/index')
          })
        })
      },
    }
  }
</script>

<style lang="scss">
  .setting-container {
    width: 100%;
    height: 100%;
    position: fixed;
    background: #F4F2FB;
    background-size: 100%;
  }
  .box-content{
    display: flex; /* 启用弹性布局 */
    justify-content: flex-end; /* 使子元素靠右对齐 */
    width: 100%;
    align-items: center;

    .text-right {
      margin-left: auto;
      margin-right: 34rpx;
      color: #999;
    }
  }
  .item-box {
    background-color: #FFFFFF;
    margin: 30rpx;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10rpx;
    border-radius: 48rpx;
    color: #303133;
    font-size: 32rpx;

  }
</style>
